<script setup lang="ts">

import rankOneImage from '../../assets/rank_one.png';
import rankTwoImage from '../../assets/rank_two.png';
import rankThreeImage from '../../assets/rank_three.png';
import rankFourImage from '../../assets/rank_four.png';
import rankFiveImage from '../../assets/rank_five.png';
import rankSixImage from '../../assets/rank_six.png';
import rankSevenImage from '../../assets/rank_seven.png';
import rankEightImage from '../../assets/rank_eight.png';

const rankImagesList = [rankOneImage, rankTwoImage, rankThreeImage, rankFourImage,rankFiveImage, rankFiveImage, rankSixImage, rankSevenImage,rankEightImage]

defineProps(['datalist'])

</script>

<template class="mainStyle">
  <div v-for="(elment,index)  in datalist" class="maindiv" :key="index">
    <div class="rowdiv1">
      <img :src='(rankImagesList[elment.rank])' width="40" height="40">
      <el-avatar class="imageStyle"
                 :src="elment.headUrl"/>
      <div class="rowdiv">
        <div class="textStyle">{{elment.name}}</div>
        <div class="fontSamll">学习时长：{{elment.learnTime}}</div>
      </div>
    </div>
            <div class="levelStyle"
                 :class="{'levelStyleHeight':elment.level>=5,'levelStyleCenter':elment?.level>=3 && elment?.level<=5,'levelStyleLow':elment?.level>=0&&elment?.level<=3}">
              lv:{{elment.level }}
            </div>

  </div>
</template>

<style scoped>

.mainStyle {
  background: #535bf2;

}

.imageStyle {
  margin-left: 20px;
  width: 48px;
  height: 48px;
}

.maindiv {
  padding: 13px 0;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  align-items: center;
}

.textStyle {
  font-weight: bold;
  font-size: 16px;
}

.rowdiv1 {
  display: flex;
  flex-direction: row;
}

.rowdiv {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

.fontSamll {
  font-weight: 400;
  font-size: 12px;
  color: #000000;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.levelStyle {
  color: white;
  text-align: center;
}

.levelStyleHeight {
  width: 60px;
  height: 28px;
  background: linear-gradient(135deg, #FFB980 0%, #F08153 100%);
  border-radius: 14px 14px 14px 14px;
}

.levelStyleCenter {
  width: 60px;
  height: 28px;
  background: linear-gradient(135deg, #8EBEFF 0%, #3C8DF9 100%);
  border-radius: 14px 14px 14px 14px;
}

.levelStyleLow {
  width: 60px;
  height: 28px;
  background: linear-gradient(135deg, #E2E2E2 0%, #AFAFAF 100%);
  border-radius: 14px 14px 14px 14px;
  text-align: center;
  align-items: center;
  line-height: 1.7;
  color: white;
}

</style>